<template>
  <div class="wrapper">
    <div class="header">
      <span class="return" @click="back()">返回</span>
      {{groupData.groupName}}
    </div>
    <div class="groupItem">
      <img :onerror="defGroupImg" :src="groupData.groupUrl" alt="">
      <div class="groupText">
        <div class="groupName">{{groupData.groupName}}</div>
        <div class="groupId">群id:{{groupData.groupId}}</div>
      </div>
    </div>
    <div class="myCard">
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
      <router-link to="/ownerGroupDetailsSetNotice">
        <div class="myCardTitle">
          群公告
          <div class="notSet"><img src="../../assets/img/icon_shape@3x.png" alt=""></div>
        </div>
      </router-link>
    </div>
    <div class="divisionLine"></div>
    <!-- <div class="myCard">

      <div class="myCardTitle" @click="showOrCloseWrapper(true, 'cardNameWrap')">
        我的群名片
        <div class="notSet">未设置<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
      <div class="lineWrapper" v-show="groupData.groupType == 'Private'">
        <div class="line"></div>
      </div>
    </div> -->
    <div class="selectedFriends" @click="showOrCloseWrapper(true, 'inviteFriendsWrap')">
      <div class="friendList">
        <img class="icon" src="../../assets/img/icon_group@3x.png" alt="">
        <div class="faceItem">
          <img v-for="(item, index) in MemberFace" :onerror="defaultImg" v-if="index < 3" :src="item.Tag_Profile_IM_Image" alt="">
          <img src="../../assets/img/icon_addfm@3x.png" v-show=" groupData.groupType && groupData.groupType == 'Private'" alt=""  @click="addGroupMemers">
        </div>
      </div>
      <div class="Set" @click="toMembersAll">成员{{MemberFace.length}}名<img src="../../assets/img/icon_shape@3x.png"
                                                                          alt=""></div>
    </div>
    <div class="myCard">
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
      <router-link to="/ownerManageGroup">
        <div class="myCardTitle">
          <div class="manageItem">
            <img src="../../assets/img/icon_gear@3x.png" alt="">管理群
          </div>
          <div class="notSet"><img src="../../assets/img/icon_shape@3x.png" alt=""></div>
        </div>
      </router-link>
    </div>
    <div class="divisionLine"></div>
    <!-- <div class="myCard">
      <div class="myCardTitle">
        聊天记录
        <div class="notSet"><img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
    </div> -->
    <div class="myCard">
      <div class="myCardTitle" @click="showOrCloseWrapper(true, 'groupTypeWrap')">
        群消息设置
        <div class="notSet">{{groupData.setGroupMsg}}<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
    </div>
    <!-- <div class="divisionLine"></div> -->
    <router-link to="/ownerGroupDetailsSetInfo">
      <div class="groupInfo">
        <div>
          <p class="groupName">群介绍</p>
          <p class="text">{{groupData.groupInfo?groupData.groupInfo:"群简介不得大于40字"}}</p>
        </div>
        <div class="Set"><img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
    </router-link>
    <div class="sendWrapper">
      <mt-button
        v-if="groupData.groupType == 'Public' || groupData.groupType == 'ChatRoom' || groupData.groupType == 'AVChatRoom'"
        type="danger" @click="destroyGroup()" size="large">解散该群
      </mt-button>
      <mt-button v-if="groupData.groupType == 'Private'" type="danger" @click="quitGroup()" size="large">退出该群
      </mt-button>
    </div>
    <!-- 设置我的群组名片层 -->
    <mt-popup
      v-model="popup.cardNameWrap"
      position="right" class="editNameWrapper">
      <div class="editName">
        <div class="header">
          <span class="return" @click="showOrCloseWrapper(false, 'cardNameWrap')">取消</span>群名片<span class="send"
                                                                                                    @click="modifynameCard()">完成</span>
        </div>
        <div class="setNameLine"></div>

        <input type="text" v-model="groupData.nameCard" class="input">
      </div>
    </mt-popup>
    <!-- 设置我的群组名片层 -->
    <!-- 设置群组类型 -->
    <mt-actionsheet
      :actions="actions"
      v-model="popup.groupTypeWrap">
    </mt-actionsheet>
    <!-- 设置群组类型 -->
  </div>
</template>
<script>

  import Client from '../../assets/js/common';
  import {Button} from 'mint-ui';
  import {Toast} from 'mint-ui';
  import {Popup} from 'mint-ui';
  import {Actionsheet} from 'mint-ui';
  import {MessageBox} from 'mint-ui';
  import {checkStatus} from '../../assets/js/login';
  export default {
    data () {
      return {
        friendList: [], // 好友列表
        popup: { // 弹出层
          cardNameWrap: false, // 群组名片
          groupTypeWrap: false, // 设置群类型的层
          changeTypeWrap: false // 更换群组类型
        },
        defaultImg: Client.defaultImg,
        defGroupImg: Client.defaultGroupImg,
        actions: [
          {name: '接收并提示', method: this.AcceptAndNotifyFn},
          {name: '接受不提示', method: this.AcceptNotNotifyFn},
          {name: '屏蔽', method: this.DiscardFn},
        ],
        loginInfo: {},
        changeData: {
          groupMembers: [],
        },
        currentGroupId: '',
        MemberFace: {}, //群成员头像
        groupId: "",
        groupData: {
          groupId: '', // 群组Id
          groupUrl: '', // 群组头像
          groupName: '', // 群组名称
          groupnotice: '', // 群组公告
          nameCard: '', // 我的群组名片
          members: [], // 群组成员
          setGroupMsg: '', // 群消息设置
          groupInfo: '', // 群介绍
          groupMute: '', // 群组禁言
          groupType: '', // 群组类型
          MemberNum: 0, // 群组人数
          joinGroupType: "", 
          ApplyJoinOption: "", // 群组类型
          groupTypeDesc: {'NeedPermission': '需要验证', 'DisableApply': '禁止加入', 'FreeAccess': '自由加入'}, // 加群方式
        }
      }
    },
    created () {
      // 登录

      checkStatus((loginInfo) => {
        this.getAll(loginInfo);
        this.loginInfo = loginInfo;
        this.friendList = Client.getStore('friendList');
        this.clickGroupDetails = Client.getStore('ClickCurrentGroupData');
        this.groupId = this.clickGroupDetails.GroupId;
        console.log("aaaa", this.clickGroupDetails)
        this.getCurrentGroupId();
        this.getGroupDetails(this.handleData);
      });

    },
    methods: {
      
      // 获取当前群组成员
      getGroupMemberInfo(group_id) {
        let options = {
          'GroupId': group_id,
          'Offset': 0, // 必须从0开始
          'Limit': 2000,
          'MemberInfoFilter': [
            'Account',
            'Role',
            'JoinTime',
            'LastSendMsgTime',
            'ShutUpUntil'
          ]
        };
        webim.getGroupMemberInfo(
          options,
          (resp) => {
            if (resp.MemberNum <= 0) {
              Toast('该群组目前没有成员');
              return;
            }
            let ids = [];
            for (let i in resp.MemberList) {
              let account = resp.MemberList[i].Member_Account;
              ids.push(account);
            }
            this.getpersonData(ids);
          },
          (err) => {
            console.log(err.ErrorInfo);
          }
        );
      },

      // 个人资料列表
      getpersonData(ids) {
        let tag_list = [
          "Tag_Profile_IM_Nick", // 昵称
          "Tag_Profile_IM_Image", // 头像URL
        ];
        let options = {
          'To_Account': ids,
          'TagList': tag_list
        };
        webim.getProfilePortrait(
          options,
          (resp) => {
            if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
              let list = resp.UserProfileItem;
              let arr = [];
              for (let attr in list) {
                let parson = {}
                let faceList = list[attr].ProfileItem;
                // console.log(list[attr]);
                parson['To_Account'] = list[attr].To_Account;
                for (let atr in faceList) {
                  // console.log(faceList[atr].Tag);
                  parson[faceList[atr].Tag] = faceList[atr].Value;
                }
                arr.push(parson);
              }
              this.MemberFace = arr;
            }
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
        // $('#set_profile_portrait_dialog').modal('show');
      },

      AcceptAndNotifyFn() {
        let options = {
          'GroupId': this.groupData.groupId,
          'Member_Account': this.loginInfo.identifier,
          'MsgFlag': 'AcceptAndNotify'
        };
        webim.modifyGroupMember(
          options,
          (resp) => {
            Toast('设置群消息提示类型成功');
            this.groupData.setGroupMsg = '接收并提示';
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },
      AcceptNotNotifyFn() {
        let options = {
          'GroupId': this.groupData.groupId,
          'Member_Account': this.loginInfo.identifier,
          'MsgFlag': 'AcceptNotNotify'
        };
        webim.modifyGroupMember(
          options,
          (resp) => {
            Toast('设置群消息提示类型成功');
            this.groupData.setGroupMsg = '接收不提示';
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );

      },
      
      DiscardFn() {
        let options = {
          'GroupId': this.groupData.groupId,
          'Member_Account': this.loginInfo.identifier,
          'MsgFlag': 'Discard'
        };
        webim.modifyGroupMember(
          options,
          (resp) => {
            Toast('设置群消息提示类型成功');
            this.groupData.setGroupMsg = '屏蔽';
          },
          (err) => {
            //alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },

      back() {
        history.back()
      },

      showOrCloseWrapper(bool, name) {
        this.popup[name] = bool;
      },
      //获取全部好友
      getAll(loginInfo) {
        //Client.log(loginInfo);
        let getAllFriend = (cbOK, cbErr) => {
          let options = {
            From_Account: loginInfo.identifier,
            TimeStamp: 0,
            StartIndex: 0,
            GetCount: 100, //totalCount,
            LastStandardSequence: 0,
            TagList: [
              "Tag_Profile_IM_Nick",
              "Tag_Profile_IM_SelfSignature", //个性签名
              "Tag_Profile_IM_Image", //头像
              "Tag_Profile_IM_Gender", //性别
              "Tag_Profile_IM_AllowType", //加好友验证方式
              "Tag_Profile_IM_Location", //所在地
              "Tag_Profile_IM_BirthDay", //生日
              "Tag_Profile_IM_MsgSettings" //消息设置 置0表示接收消息，置1则不接收消息
            ]
          };
          webim.getAllFriend(
            options,
            (resp) => {
              Client.log(resp);
              if (resp.FriendNum > 0) {
                //转化成对象挂载到数据
                for (let i = 0; i < resp.InfoItem.length; i++) {
                  if (resp.InfoItem[i].SnsProfileItem) {
                    let sns = resp.InfoItem[i].SnsProfileItem;
                    sns.forEach((ele, index) => {
                      resp.InfoItem[i][ele.Tag] = ele.Value;
                    });
                    //清空原来的resp.InfoItem[i].SnsProfileItem = '';
                  }
                }

                this.friendList = resp.InfoItem;
                Client.log(this.friendList);
                let friends = resp.InfoItem;
                //存储好友列表
                Client.setStore('friendList', friends);
                //Client.log(Client.getStore('friendList'));
                if (cbOK) cbOK();
              }
            },
            (err) => {
              // alert(err.ErrorInfo);
              Client.errInfo()
            }
          );
        };
        getAllFriend();
      },
      //解散群组
      destroyGroup() {
        let options = null;
        if (this.groupData.groupId) {
          options = {
            'GroupId': this.groupData.groupId
          };
        }
        if (options == null) {
          Toast('解散群时，群组ID非法');
          return;
        }

        webim.destroyGroup(
          options,
          (resp) => {
            Toast('解散群成功');
            this.$router.push({path: '/AddressList', query: {'type': 1}})
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },
      //群主\管理员 退群
      quitGroup() {
        let options = null;
        if (this.groupData.groupId) {
          options = {
            'GroupId': this.groupData.groupId
          };
        }
        if (options == null) {
          Toast('退群时，群组ID非法');
          return;
        }
        webim.quitGroup(
          options,
          (resp) => {
            Toast('退出成功');
            this.$router.push({path: '/AddressList', query: {'type': 1}})
          },
          (err) => {
            //alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },

      getCurrentGroupId() {
        this.currentGroupId = this.$route.query.groupId;
        if (!this.$route.query.groupId) {
          this.$router.push({path : '/'});
          
          return;
        }
      },

      handleData(groupData) {
        this.groupData.groupId = groupData.GroupInfo["0"].GroupId; // 群组Id
        this.groupData.groupUrl = groupData.GroupInfo["0"].FaceUrl; // 群组头像
        this.groupData.groupName = groupData.GroupInfo["0"].Name; // 群组名称
        this.groupData.groupnotice = groupData.GroupInfo["0"].Notification; // 群组公告
        this.groupData.nameCard = groupData.GroupInfo["0"].nameCard; // 我的群组名片
        this.groupData.members = groupData.GroupInfo["0"].MemberList; // 群组成员
        this.groupData.setGroupMsg = this.clickGroupDetails.MsgFlag; // 群消息设置
        this.groupData.groupInfo = groupData.GroupInfo["0"].Introduction; // 群介绍
        this.groupData.groupMute = groupData.GroupInfo["0"].ShutUpAllMember; // 群组全局禁言
        this.groupData.groupType = groupData.GroupInfo["0"].Type; // 群组类型
        this.groupData.MemberNum = groupData.GroupInfo["0"].MemberNum // 群组成员
        this.groupData.ApplyJoinOption = groupData.GroupInfo["0"].ApplyJoinOption // 群组加群方式en
        this.groupData.joinGroupType = this.groupData.groupTypeDesc[this.groupData.ApplyJoinOption] // 群组加群方式 

        this.getGroupMemberInfo(this.groupData.groupId);
      },
      // 修改公告
      modifyNotification() {
        if (webim.Tool.getStrBytes(this.groupData.groupnotice) > 150) {
          Toast('群公告超出限制(最长50个汉字)');
          return;
        }
        let options = {
          'GroupId': this.groupData.groupId,
          'Notification': this.groupData.groupnotice
        };
        let info = '修改群公告成功';
        this.savemodify(options, info);
      },

      // 修改群名片
      modifynameCard() {
        if (webim.Tool.getStrBytes(this.groupData.nameCard) > 10) {
          Toast('群名片超出限制(最长10个汉字)');
          return;
        }
        let options = {
          'GroupId': this.groupData.groupId,
          'NameCard': this.groupData.nameCard
        };
        let info = '修改群名片成功'
        this.savemodify(options, info);
        console.log(this.groupData);
      },

      //执行修改
      savemodify(options, info) {
        webim.modifyGroupBaseInfo(
          options,
          (resp) => {
            MessageBox('提示', info);
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },

      // 获取群组详情
      getGroupDetails(cbOK) {
        let options = {
          'GroupIdList': [
            this.currentGroupId
          ],
          'GroupBaseInfoFilter': [
            'GroupId',
            'Type',
            'Name',
            'Introduction',
            'Notification',
            'FaceUrl',
            'CreateTime',
            'Owner_Account',
            'LastInfoTime',
            'LastMsgTime',
            'NextMsgSeq',
            'MemberNum',
            'MaxMemberNum',
            'ApplyJoinOption',
            'ShutUpAllMember',
            'NameCard'
          ],
          'MemberInfoFilter': [
            'Account',
            'Role',
            'JoinTime',
            'LastSendMsgTime',
            'ShutUpUntil',
            'NameCard'
          ]
        };
        webim.getGroupInfo(
          options,
          (resp) => {
            if (resp.GroupInfo[0].ShutUpAllMember == 'On') {
              // Toast('该群组已开启全局禁言');
            }
            if (cbOK) {
              cbOK(resp);
            }
          },
          (err) => {
            // alert(err.ErrorInfo);
             Client.errInfo()
          }
        );
      },
      // 设置默认头像
      defaultUrl(dataInfo) {
        if (dataInfo.Tag_Profile_IM_Image) {
          return dataInfo.Tag_Profile_IM_Image;
        } else {
          // return 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035232992,4003217897&fm=27&gp=0.jpg';
        }
      },

      //设置默认名称
      defaultName(dataInfo) {
        if (dataInfo.Tag_Profile_IM_Nick) {
          return dataInfo.Tag_Profile_IM_Nick;
        } else {
          return dataInfo.Info_Account;
        }
      },

      //检查是否已经在群里
      isDefaultClass(memberId) {
        console.log(123321);
        for (let i = 0; i < this.groupData.MemberNum; i++) {
          if (this.groupData.members[i].Member_Account == memberId) {
            return true;
          }
        }
        return false;
      },

      // 选择需要邀请的好友
      toggleFriend(event, Item) {
        if (event.target.getAttribute('class').indexOf('circleDefault') > 0) {
          return;
        }
        if (event.target.getAttribute('class').indexOf('circleActive') < 0) {
          let friend = {};
          friend.friendId = Item.Info_Account;
          friend.friendUrl = Item.Tag_Profile_IM_Image;
          this.changeData.groupMembers.push(friend);
          event.target.classList.add('circleActive');
        } else {
          if (this.changeData.groupMembers.length) {
            let newArr = [];
            for (let i = 0; i < this.changeData.groupMembers.length; i++) {
              if (this.changeData.groupMembers[i]['friendId'] != Item.Info_Account) {
                newArr.push(this.changeData.groupMembers[i]);
              }
            }
            this.changeData.groupMembers = newArr;
          }
          event.target.classList.remove('circleActive');
        }
      },

      // 邀请加入提交
      saveApplyJoin() {
        let MemberList = [];
        if (this.changeData.groupMembers.length > 0) {
          for (let i = 0; i < this.changeData.groupMembers.length; i++) {
            let member = {
              'Member_Account': this.changeData.groupMembers[i].friendId
            }
            MemberList.push(member);
          }
        }
        let options = {
          'GroupId': this.groupData.groupId,
          'MemberList': MemberList
        };
        console.log(MemberList);
        if (MemberList.length <= 0) {
          Toast('还没邀请任何好友');
          return;
        }
        webim.addGroupMember(
          options,
          (resp) => {
            Toast('邀请好友加群成功');
          },
          (err) => {
            // alert(err.ErrorInfo);
            Client.errInfo()
          }
        );
      },

      // 添加群成员
      addGroupMemers(){
        this.$router.push({path: 'groupMemers', query: {groupId: this.groupData.groupId, type: 'add'}})
      },
      // 所有群成员
      toMembersAll(){
        Client.setStore("groupDetailsPage",{page: "/memberGroupDetails?groupId="+this.groupData.groupId})
        this.$router.push({path: 'groupMemersAll', query: {groupId: this.groupData.groupId}})
      },

    },
    components: {
      'mtButton': Button,
      'mtPopup': Popup
    }

  }
</script>
<style>
  .mint-toast {
    z-index: 2999;
  }

  .sendWrapper {
    width: 3.45rem;
    position: fixed;
    bottom: 0.28rem;
    margin: 0 0.15rem;
  }

  .sendWrapper .mint-button--danger {
    background-color: #4F4F4F;
  }

  .sendWrapper .mint-button--danger .mint-button-text {
    font-size: 0.16rem;
  }
</style>
<style lang="less" scoped rel="stylesheet/less">
  .friendItem {
    height: 0.6rem;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0 0.15rem;

    .circle {
      width: 0.2rem;
      height: 0.2rem;
      background-image: url('../../assets/img/icon_unsekected@3x.png');
      background-size: 100%;
      background-repeat: no-repeat;
      margin-right: 0.15rem;
    }

    .circleActive {
      background-image: url('../../assets/img/icon_designate01@3x.png');
    }

    .circleDefault {
      background-image: url('../../assets/img/icon_selected01@3x.png') !important;
    }

    .friendImg {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      margin-right: 0.06rem;
    }

    .friendName {
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      position: relative;
      font-size: 0.16rem;

      .friendNameLine {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        background-color: #E1E1E1;
      }

    }
  }

  .wrapper {

    .editNameWrapper {
      width: 100%;
      height: 100%;

      .editName {
        width: 100%;
        height: 100%;
        background: #F5F5F5;

        .setNameLine {
          height: 0.21rem;
        }

        .input {
          width: 100%;
          height: 0.5rem;
          text-indent: 0.15rem;
          background-color: white;
          color: #4A4A4A;
          font-size: 0.14rem;
          outline: none;
          font-weight: 400;
          border: none;
        }

      }
    }
    .divisionLine {
      height: 0.1rem;
      background-color: #F4F4F4;
    }

    .header {
      width: 3.75rem;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 0.16rem;
      border-bottom: 1px solid #f4f4f4;
      background-color: white !important;

      .return {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        left: 0.15rem;
      }

      .send {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        right: 0.15rem;
      }

    }
    .groupItem {
      height: 0.8rem;
      padding: 0.15rem 0;
      display: flex;
      background-color: white;
      box-sizing: border-box;

      img {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        margin: 0 0.1rem 0 0.15rem;
      }

      .groupText {
        height: 0.5rem;

        .groupName {
          height: 0.22rem;
          line-height: 0.22rem;
          margin-bottom: 0.08rem;
          font-size: 0.16rem;
          color: #4A4A4A;
        }

        .groupId {
          font-size: 0.14rem;
          color: #818181;
        }

      }
    }

    .myCard {
      height: 0.51rem;
      background-color: white;
      padding: 0 0.15rem;

      .lineWrapper {
        height: 1px;

        .line {
          width: 3.45rem;
          height: 1px;
          background-color: #E5E5E5;
        }

      }
      .myCardTitle {
        height: 0.5rem;
        line-height: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.14rem;
        color: #4a4a4a;

        .manageItem {
          display: flex;
          align-items: center;

          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.1rem;
          }

        }
        .notSet {
          display: flex;
          align-items: center;

          img {
            width: 0.15rem;
          }

        }
      }
      .line {
        /*height: 1px solid #E5E5E5;*/
      }

    }
    .selectedFriends {
      height: 0.7rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.15rem;
      background-color: white;
      align-items: center;

      .friendList {
        display: flex;
        align-items: center;

        .icon {
          width: 0.20rem;
          height: 0.20rem;
          margin-right: 0.1rem;
        }

        .faceItem {

          img {
            width: 0.5rem;
            height: 0.5rem;
            float: left;
            border-radius: 50%;
            margin-right: 0.1rem;
          }

        }
      }
      .Set {
        display: flex;
        align-items: center;
        font-size: 0.12rem;

        img {
          width: 0.15rem;
          height: 0.15rem;
          margin: 0;
        }

      }
    }
    .groupInfo {
      height: 0.7rem;
      background-color: white;
      padding: 0.14rem 0.15rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;

      .Set {
        display: flex;
        align-items: center;
        font-size: 0.12rem;

        img {
          width: 0.15rem;
          height: 0.15rem;
          margin: 0;
        }

      }
      .groupName {
        color: #4F4F4F;
        font-size: 0.14rem;
      }

      .text {
        padding-top: 0.05rem;
        font-size: 0.12rem;
        color: #818181;
        width: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

    }
  }
</style>


